angular.module("app").directive("addMouseover", ($compile) => ({
  link(scope, element, attrs) {
    const newEl = $('<span ng-show="showHint"> My Hint</span>');
    element.on("mouseenter mouseleave", () => {
      scope.$apply("showHint = !showHint");
    });

    attrs.$set("addMouseover", null); // To stop infinite compile loop
    element.append(newEl);
    $compile(/* here -> */ element)(scope); // Double compilation
  },
}));
